<script lang="ts" setup>
import { ref } from 'vue';
import { Carousel } from '@ark-ui/vue/carousel';
import { useFetch } from '@/home/hooks/fetch';
import { useAsyncData } from '@/home/hooks/async-data';

const { $fetch } = useFetch();

const { data: imgList } = useAsyncData(
  'home:operation',
  () => $fetch('/operator/getOperatorList', { method: 'post', data: { operateType: 3 } }),
);
const index = ref(0);
</script>

<template>
  <section class="mt-20 rounded-4 shadow-[0_1px_6px_0_rgba(0,0,0,0.04)]">
    <Carousel.Root id="page-home-operation" loop autoplay :slide-count="imgList?.length" v-model:page="index" class="group relative overflow-x-hidden" v-if="imgList?.length">
      <Carousel.Context v-slot="context">
        <Carousel.ItemGroup>
          <Carousel.Item class="h-180" v-for="(item, idx) in imgList" :key="idx" :index="idx">
            <a class="block size-full" :href="item.jumpUrl" target="_blank" :aria-label="`${$t('home.common.carousel.jumpToUrl', { url: item.jumpUrl }) }`">
              <img :src="item.picUrl" class="block size-full rounded-4 object-cover" :alt="item.operateName">
            </a>
          </Carousel.Item>
        </Carousel.ItemGroup>
        <Carousel.Control as-child>
          <Carousel.PrevTrigger
            class="absolute left-8 top-50% h-24 w-24 flex-center translate-y--50% rounded-full bg-hex-000000/20 opacity-0 group-hover:(opacity-20)"
            @click="context.play"
          >
            <span class="i-icons:arrow-left block size-16"></span>
          </Carousel.PrevTrigger>
          <Carousel.NextTrigger
            class="absolute right-8 top-50% h-24 w-24 flex-center translate-y--50% rounded-full bg-hex-000000/20 opacity-0 group-hover:(opacity-20)"
            @click="context.play"
          >
            <span class="i-icons:arrow-right block size-16"></span>
          </Carousel.NextTrigger>
        </Carousel.Control>
      </Carousel.Context>
    </Carousel.Root>
  </section>
</template>

<style lang="scss" scoped>
</style>
